<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../assets/css/base.css">
    <link rel="stylesheet" href="./components/MySwitch.css">
    <style>
        .box{
            display: flex;
            flex-flow: row nowrap;
            width: 150px;
        }
        .box>div{
            flex-grow: 1;
        }
    </style>
</head>
<body>
    <div id="app">
        <pre v-pre class="note">
        组件定义的开发分类:
            + 页面组件：组成完成项目功能的页面划分组件【每个组件描述一个单独的页面】
            + 页面构造组件：一个项目中被重复使用的页面组成组件【组件只能在特定项目中使用】
            + 功能组件：一个独立的标签美化组件或者组合功能组件，可以在任意项目中被复用【UI组件库】
            + 插件组件：针对三方JS功能库进行的独立化的完整逻辑定义组件
            
        双向数据共享的需求【功能组件】
        </pre>
        <p>flag:{{ flag }}</p>
        <input type="checkbox" v-model="flag"> <br>
        <my-switch :flag="flag" @update:flag="updateFlag"></my-switch>
        <hr>
        <p>arr:{{ arr }}</p>
        <div class="box">
            <div>
                A<input type="checkbox" value="A" v-model="arr"> <br>
                B<input type="checkbox" value="B" v-model="arr"> <br>
                C<input type="checkbox" value="C" v-model="arr"> <br>
                D<input type="checkbox" value="D" v-model="arr"> <br>
            </div>
            <div>
                A <my-switch value="A" :flag="arr" @update:flag="updateArr"></my-switch> <br>
                B <my-switch value="B" :flag="arr" @update:flag="updateArr"></my-switch> <br>
                C <my-switch value="C" :flag="arr" @update:flag="updateArr"></my-switch> <br>
                D <my-switch value="D" :flag="arr" @update:flag="updateArr"></my-switch> <br>
            </div>
        </div>
        <!-- <input type="checkbox" :value="value" :checked="flag" @change="printSwitchBtnState($event)"> -->

    </div>
    <script type="module">
        import { createApp } from "../../assets/vue3/vue.esm-browser.js";
        import MySwitch from "./components/MySwitch.js";
        createApp({
            components: {
                MySwitch,
            },
            data(){
                return {
                   flag:true,
                   arr:["A","D"]
                }
            },
            methods: {
                updateFlag( nv ) {
                    this.flag = nv;
                },
                updateArr( nv ){
                    this.arr = nv;
                }
            },
        }).mount("#app");
    </script>
</body>
</html>